package com.qingyue.demo.ui.screen

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.SnackbarDuration
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch

@Composable
fun LoginScreen(modifier: Modifier = Modifier) {
    Column(
        modifier = Modifier,
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        var username by remember { mutableStateOf("") }
        var password by remember { mutableStateOf("") }
        var passwordVisible by remember { mutableStateOf(false) }

        OutlinedTextField(
            modifier = modifier.height(60.dp),
            value = username,
            onValueChange = {
                username = it
            },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.Person,
                    contentDescription = null,
                    tint = Color.Blue
                )
            },
            label = {
                Text(text = "用户名")
            },
            // 输入单行
            singleLine = true,
        )

        OutlinedTextField(
            modifier = modifier.height(60.dp),
            value = password,
            onValueChange = {
                password = it
            },
            // 前置图标
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.Lock,
                    contentDescription = null,
                    tint = Color.Blue
                )
            },
            // 后置图标
            trailingIcon = {
                IconButton(
                    onClick = {
                        /* TODO: 密码可见性 */
                        passwordVisible = !passwordVisible
                    },
                ) {
                    Icon(
                        imageVector = if (passwordVisible) Icons.Filled.Visibility else Icons.Filled.VisibilityOff,
                        contentDescription = null,
                        tint = Color.Blue
                    )
                }
            },
            label = {
                Text(text = "密码")
            },
            // 设置文本可见性
            visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
            // 输入单行
            singleLine = true,
        )
        Column(modifier = Modifier.padding(top = 16.dp).height(60.dp)) {
            LoginButton(username, password)
        }

    }
}

@Composable
fun LoginButton(username: String, password: String) {
    val state = remember { SnackbarHostState() }
    val scope = rememberCoroutineScope()
    SnackbarHost(
        hostState = state
    )
    Button(
        modifier = Modifier.fillMaxWidth().height(60.dp),
        onClick = {
            /* TODO: 登录 */
            if (username.isEmpty() || password.isEmpty()) {
                scope.launch(Dispatchers.IO) {
                    state.showSnackbar("请输入用户名和密码", duration = SnackbarDuration.Short)
                }
            }
        },
        enabled = username.isNotEmpty() && password.isNotEmpty()
    ) {
        Text(text = "登录")
    }
}